<template>
  <Steps :active="active">
    <Step v-for="(step, index) in steps" :key="index" :title="step.title">
      <template v-if="step.img" v-slot:icon>
        <img :src="step.img" alt="">
      </template>
    </Step>
  </Steps>
</template>

<script>
import { Steps, Step } from 'element-ui'

export default {
  name: 'MStep',
  components: { Step, Steps },
  props: {
    steps: {
      type: Array,
      default() {
        return [
          { title: '' }
        ]
      }
    },
    active: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-step {

  .el-step__icon {
    width: 50px;
    height: 50px;
    background: #969696;
    border: none;
    position: relative;
  }

  .el-step__icon.is-text {
    border: none;

  }

  .el-step__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    background: rgba(233, 233, 233, 0.57);
    border-radius: 50%;
  }

  .el-step__line {
    height: 5px;
    background: #F3F4F7;
    border-radius: 3px;
    top: 25px;
  }

  .el-step__line-inner {
    height: 5px;
  }

  .el-step__icon-inner {
    font-size: 30px;
    color: #fff;
    font-weight: normal;
    z-index: 99;

  }

  .el-step__title {
    margin-top: 11px;
    margin-left: -6px;
  }

  .is-process {
    font-weight: normal;
    color: #E48B2C;
  }

  .el-step__head.is-process .el-step__icon {
    background: #E48B2C;
  }

  .el-step__head.is-process .el-step__icon::after {
    background: rgba(228, 139, 44, 0.57);
  }

  .is-finish {
    color: #E48B2C;
  }

  .el-step__head.is-finish .el-step__icon {
    background: #E48B2C;
  }

  .el-step__head.is-finish .el-step__icon::after {
    background: rgba(228, 139, 44, 0.57);
  }

  .el-step__head.is-finish .el-step__line-inner {
    border-width: 1px !important;
    width: 100% !important;
    background: #FBD59F;
    border: none;
  }
}
</style>
